<template>
	<view class="container">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="routeBack" class="icon-left">
					<u-icon name="arrow-left" color="#000" size="16"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">个人资料</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right">
					<view v-if="nameFlag" class="editOk" @tap.stop="editOk">完成</view>
				</view>
			</view>
		</u-navbar>
		
		
		<view class="account">
			<view class="userList" @tap="editAvatar">
				<text>更新头像</text>
				<view class="avatar">
					<image :src="userData.avatarUrl" mode="aspectFill"></image>
					<u-icon class="iconft" name="arrow-right" color="#999" size="34upx"></u-icon>
				</view>
			</view>
			
			<view class="userList" @tap="setFocus=true">
				<text>昵称</text>
				<view class="avatar">
					<u-input class="nickName" border="none" color="#999" fontSize="30upx" :focus="setFocus" v-model="nickName" @change="changeNickName" />
					<u-icon class="iconft" name="arrow-right" color="#999" size="34upx"></u-icon>
				</view>
			</view>
			<!-- 
			<view class="userList" v-if="userData.isRealName == 0"
				@tap="navToPages(`/pages/openAccount/openAccountAgreement?phone=${userData.mobile}`)">
				<text>实名认证</text>
				<view class="avatar">
					<u-icon class="iconft" name="arrow-right" color="#999" size="34upx"></u-icon>
				</view>
			</view> -->
			
<!-- 			<view class="userList"  v-if="userData.isRealName == 1">
				<text>区块链地址</text>
				<view class="avatar">
					<view>{{userDetails.blockchainAccount}}</view>
					<u-icon class="iconft" name="arrow-right" color="#999" size="34upx"></u-icon>
				</view>
			</view>
			
			<view class="userList" v-if="userData.isRealName == 1">
				<text>姓名</text>
				<view class="avatar">
					<view>{{userDetails.username}}</view>
					<u-icon class="iconft" name="arrow-right" color="#999" size="34upx"></u-icon>
				</view>
			</view>
			
			<view class="userList" v-if="userData.isRealName == 1">
				<text>身份证号</text>
				<view class="avatar">
					<view>{{userDetails.idcardNo}}</view>
					<u-icon class="iconft" name="arrow-right" color="#999" size="34upx"></u-icon>
				</view>
			</view> -->
			
		</view>
	</view>
</template>
<script>
	import {
		setHeadPortrait,
		updateNickName
	} from '../../api/user.js'
	
	import {
	    mapState ,mapMutations
	} from 'vuex'; 
	import {getUser} from '@/api/login.js'
	export default {
		data() {
			return {
				nickName: '',
				avatarUrl: '',
				userData: {},
				nameFlag: false,
				setFocus:false
			}
		},
		async onShow() {
			let res = await getUser()
			if (res.status == 200) {
				this.userData = res.data.user;
				this.nickName = res.data.user.nickname;
				this.userData.avatarUrl = res.data.user.headPortraitUrl?this.pathImg+res.data.user.headPortraitUrl:require("@/static/common/noLogin.png");
			}
		},
		methods: {
			navToPages(url) {
				if(!this.hasLogin){
					uni.navigateTo({
						url:"/pages/login/login"
					});
					return;
				}
				uni.navigateTo({
					url
				});
			},
			changeNickName(e){
				console.log(e);
				if(e != this.userData.nickname){
					this.nameFlag = true;
				}
			},
			editAvatar() {
				let token = uni.getStorageSync('newToken').token;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						uni.uploadFile({
							url: this.baseApi + '/uploadFiles/ossUpload',
							filePath: res.tempFilePaths[0],
							header: {token},
							formData: {
								isPrivate: false
							},
							name: 'file',
							success: (res) => {
								let data = JSON.parse(res.data);
								if (data.success) {
									setHeadPortrait({
										headPortraitUrl: data.obj
									}).then(res => {
										if (res.data.success) {
											this.avatarUrl = this.pathImg + data.obj;
											let dataS = this.userData;
											dataS.headPortraitUrl = data.obj;
											this.$store.commit('setData',{ 'uerInfo.headPortraitUrl':data.obj});
											try {
												uni.setStorageSync('userObj',dataS);
											} catch (e) {
												// error
											}
											this.$u.toast('头像修改成功');
										} else {
											this.$u.toast(res.data.msg);
										}
									})
								} else {
									this.$u.toast(res.data.msg);
								}
							}
						});
					}
				})
			},
			// 导航栏左侧返回
			routeBack() {
				let canNavBack = getCurrentPages();
				if(canNavBack && canNavBack.length>1) {  
				    uni.navigateBack({  
				      delta: 1  
				    });  
				} else {  
				    history.back();  
				}
			},
			// 导航栏右侧完成
			editOk() {
				if (!this.nameFlag) {
					this.$u.toast('请输入修改的昵称');
					return
				}
				updateNickName({
					nName: this.nickName
				}).then(res => {
					if (res.data.success) {
						this.nameFlag = false;
						let dataS = this.userData;
						dataS.nickname = this.nickName;
						this.$store.commit('setData',{ 'uerInfo.nickname':this.nickName});
						try {
							uni.setStorageSync('userObj',dataS);
						} catch (e) {
							// error
						}
						this.$u.toast('昵称修改成功');
					} else {
						this.$u.toast(res.data.msg);
					}
				})
			},
		}
	}
</script>
<style lang="less" scoped>
	.container{
		width: 100%;
		height: 100%;
		padding-top: 120upx;
		padding-bottom: 60upx;
		background-color: #F6F7F9;
		.logoBox{
			width: 100%;
			height: 100%;
			.navBox{
				height: 120upx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #000;
				box-shadow: 0px 0px 1px 0px rgba(51,51,51,0.5000);
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
			}
		}
		.icon-right{
			color: #000;
			font-size: 26upx;
			padding-right: 16upx;
			padding-top: 20upx;
		}
		.account {
			width: 100%;
			height: 100%;
			background-color: #fff;
			// margin-top: 30upx;
			padding: 0upx 30upx;
			.userList{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #F7F7F7;
				padding: 10upx 0;
				min-height: 100upx;
				>text{
					display: inline-block;
					line-height: 30upx;
					color: #333;
					font-size: 30upx;
				}
				.avatar{
					display: flex;
					align-items: center;
					image{
						width: 90upx;
						height: 90upx;
						border-radius: 50%;
						// box-shadow: 0 0 6px 3px rgba(0,0,0,0.1);
					}
					.nickName {
						/deep/.uni-input-input {
							text-align: right;
							font-weight: bold;
						}
					}
					.iconft{
						margin-left: 20upx;
						height: 30upx;
						line-height: 30upx;
					}
				}
			}
		}
	}
	
</style>